{% extends "帖子/Yy天涯/H5/template.html" %}
{% block title %}帖子详情{% endblock %}
{% block css %}
<style>
    .content {
        padding: 10px;
    }



    .topic_text_box {
        padding: 10px;
        background-color: #dadada;
    }

    .topic_text_box img {
        width: 100%;
        margin: 10px 0;
        border-radius: 8px;
    }



    .top_go_return {
        height: 40px;
        background-color: #1588f5;
    }
</style>
{% endblock %}
{% block body %}
<div class="top_go_return Yy-d-flex Yy-ai-cen">
    <span onclick="YyBack()" class="layui-icon layui-icon-left layui-font-20 Yy-color-fff"></span>
</div>
<div class="content Yy-br-8">
    <div class="topic_title_info Yy-br-8">
        <h2 class="title Yy-text-cen layui-font-30"></h2>
        <div class="Yy-d-flex Yy-ju-sa Yy-mt-10px Yy-br-8">
            <span><span class="iconfont icon-shijian"></span> <span class="topic_shijian"></span></span>
            <a><span class="iconfont icon-wode"></span> <span class="topic_athor"></span></a>
        </div>
    </div>


    <!-- 帖子文本内容 -->
    <div class="topic_text_box Yy-mt-30px Yy-br-8 layui-font-16"></div>

    <!-- 视频播放区 -->
    <div class="videobox Yy-d-flex Yy-d-flex-column Yy-ai-cen Yy-mt-30px">
        <h3 class="layui-padding-3"><span class="iconfont icon-dianshiqiangdianshiqiangshitu"></span> 精品视频区</h3>
        <!-- <video src="" controls class="video Yy-br-8 Yy-w-100"></video> -->
        <div id="wrapper"></div>
    </div>
</div>




{% endblock %}
{% block js %}
{% include "帖子/Yy天涯/H5/include/Fixbar.html" %}
<script src="/static/CloudJs/chimee-player.browser.js"></script>
<script>
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么

        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    let topic_id = YygetQueryParam("id");

    // 判断本地是否有当前帖子的信息topic_item_list
    const local_res = YyGetLocatStorge(topic_item_list);

    layui.use(function () {
        var layer = layui.layer;
        var util = layui.util;

        function topic_jiexiqi(data) {
            $(".title").html(data.title);
            $(".topic_shijian").html(data.createTime);
            $(".topic_athor").html(data.user.nickname);
            $(".topic_text_box").html(data.content);

            let imgs = document.querySelectorAll(".topic_text_box img");
            for (let i = 0; i < imgs.length; i++) {
                axios({
                    url: imgs[i].src,
                }).then(img_res => {
                    let o = (new YyHaiJiao).decode(img_res.data);
                    imgs[i].src = o;
                    imgs[i].setAttribute("yy-on", "photots");
                })
            }

            // 判断视频
            for (let i = 0; i < data.attachments.length; i++) {
                if (data.attachments[i].category == "video") {
                    new ChimeePlayer({
                        wrapper: '#wrapper', // video dom容器
                        src: data.attachments[i].remoteUrl,
                        box: 'hls',
                        isLive: false,
                        autoplay: false,
                        controls: true,
                        poster: data.attachments[i].coverUrl
                    });
                }
            }

        }

        function ex_local(data) {
            if (local_res == null) {
                YySetLocatStorge(topic_item_list, [data])
            } else {
                // 判断当前帖子是否存在于列表中
                if (local_res.filter(item => item.topicId == data.topicId).length == 0) {
                    YySetLocatStorge(topic_item_list, [...[data], ...local_res])
                }
            }

        }

        function acasascsac() {
            $('body').waitMe({
                effect: "ios",
                text: "正在加载资源..."
            })
            axios({
                url: '/api/Topic/HaiJiao/get_topic_content/',
                params: {
                    pid: topic_id
                }
            }).then(res => {
                let data = res.data.data.data;
                topic_jiexiqi(data)
                ex_local(data);


            }).finally(() => {
                $('body').waitMe("hide");
            })
        }

        if (topic_id == null) {
            layer.alert('有未携带的参数', {
                icon: 2,
                shadeClose: true,
                closeBtn: 0,
                title: '警告'
            }, () => {
                YyBack()
            })
        } else {
            util.on('yy-on', {
                photots: function () {
                    layer.photos({
                        photos: {
                            "title": "Photos Demo",
                            "start": 0,
                            "data": $('.topic_text_box img')
                        }
                    });
                }
            });

            if (local_res != null) {
                let data = local_res.filter(item => item.topicId == topic_id);
                if (data.length > 0) {
                    topic_jiexiqi(data[0]);
                } else {
                    acasascsac();
                }
            } else {
                acasascsac();
            }

        }


    });


</script>
{% endblock %}